<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

<script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="js/astronomy.browser.min.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/webgl-debug-helper.js"></script>
<script type="text/javascript" src="js/webgl-utils.js"></script>
<script type="text/javascript" src="js/3d-math.js"></script>
<script type="module" src="js/index.js"></script>

<body>
    <div id="main">
        <div id="ui">
            <div id="ui-time">时间: 0</div>
            <div>
                偏移时间（小时）
                <input id="ui-shift-time" type="text" value="0.5"></input>
            </div>
            <input id="ui-update-star" type="button" value="偏移时间并重算位置"></input>
        </div>
        <canvas id="gl-canvas" width="512" height="512">
            Canvas not supported
        </canvas>
    </div>

</body>
</html>

<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #main {
        width: 100%;
        height: 100%;
        display: flex;
    }

    #ui {
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #ui * {
        margin: 10px;
    }

    #gl-canvas {
        width: 80%;
        height: 100%;
    }
</style>